<template>
<div class="row">
  <div class="col-md-3 offset-md-7">
<div class="card">
  <div class="card-header">
   登录
  </div>
  <div class="card-body">
    <form>
  
      <div class="form-group">
        <label for="exampleInputEmail1">手机</label>
        <input type="number" class="form-control" v-model="$v.user.phone.$model" aria-describedby="emailHelp" placeholder="Enter phone">
        <small class="form-text text-muted" v-if="!$v.user.phone.required">请输入手机</small>
        <small class="form-text text-muted" v-if="$v.user.phone.required && !$v.user.phone.telephone">请输入11位手机号码</small>
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">密码</label>
        <input type="password" class="form-control" v-model="$v.user.password.$model" placeholder="Password">
         <small class="form-text text-muted" v-if="!$v.user.password.required">请输入密码</small>
        <small class="form-text text-muted" v-if="$v.user.password.required && !$v.user.password.minLength">请输入6位以上密码</small>
      </div>
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">Check me out</label>
      </div>
      <button  class="btn btn-primary   btn-block" @click="login()">提交</button>
  </form>
  </div>
</div>
  </div>
</div>
    
</template>

<script>
import { required, minLength } from 'vuelidate/lib/validators'
import customValitor from "@/helper/validator"
// import storageService from "@/service/storageService"

import {createNamespacedHelpers} from 'vuex';
const createNamespacedHelpers = createNamespacedHelpers('userModule');
export default {
  data(){
    return {
      user : {
        phone:"",
        password:""
      }
    }
  },
  validations:{
    user:{
      phone:{
        required,
        telephone:customValitor.telephoneValidator
      },
      password:{
        required,
        minLength: minLength(6)
      },
    }
  },
  methods:{
    ...mapMutations('userModule',['SET_TOKEN','SET_USERINFO']),
    login(){ 
      this.$v.user.$touch();
      if(this.$v.user.$anyError){
        return;
      }
      this.$store.dispatch('userModule/login').then(()=>{
        this.$router.replace({name:"Home"});
      }).catch();
      // userService.login(this.user).then((res)=>{
      //     // console.log(res.data)
      //     this.SET_TOKEN(res.data.data.authorization);
      //     // storageService.set(storageService.USER_TOKEN, res.data.data.authorization)
      //     this.SET_USERINFO(res.data.data.user);
      //     // storageService.set(storageService.USER_INFO, JSON.stringify(res.data.data.user))
      //     this.$router.replace({name:'home'})
      // }).catch((err)=>{

      // })
      // console.log('submit!')
      // this.$v.$touch()
      // if (this.$v.$invalid) {
      //   this.submitStatus = 'ERROR'
      // } else {
      // this.submitStatus = 'PENDING'
      // setTimeout(() => {
      //   this.submitStatus = 'OK'
      // }, 500)
    }
  }
}
</script>

<style scoped>

</style>